import React, { useState, createElement } from 'react';
import { Layout, Button, Menu, Dropdown } from 'antd';
import {
    MenuUnfoldOutlined, MenuFoldOutlined,
    DesktopOutlined,
    ContainerOutlined,
    MailOutlined,
    GithubOutlined,
    CopyrightOutlined,
    UserOutlined

} from '@ant-design/icons';
const { SubMenu } = Menu;
const { Header, Sider, Content, Footer } = Layout
import styles from './management.less'
import './management.less'
import { Link, NavLink } from 'umi';


const management: React.FC = (props) => {
    let [state, setState] = useState(false);
    let [andio, setAndio] = useState(JSON.parse(localStorage.getItem("user") as string));
    const toggleCollapsed = () => {
        setState(!state);
    };
    // 最右側的護具
    const menu = (
        <Menu>
            <Menu.Item>
                <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
                    個人中心
                </a>
            </Menu.Item>
            <Menu.Item>
                <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
                    用户管理
                </a>
            </Menu.Item>
            <Menu.Item>
                <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
                    系统设置
                </a>
            </Menu.Item>
            <Menu.Item>
                <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
                    退出登录
                </a>
            </Menu.Item>
        </Menu>
    );

    return <Layout className={styles.app}>
        <Sider className={styles.left} collapsed={state}>
            <div className={styles.boxImg}>
                <img src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-20/wipi-favicon.png" alt="" />
                <span>{state ? "" : "管理后台"}</span>
            </div>
            <div className={styles.boxButton}> <Button type="primary"><span>+</span> <span>{state ? "" : "新建"}</span></Button></div>
            <div>
                <Menu
                    defaultSelectedKeys={['1']}
                    defaultOpenKeys={['sub1']}
                    mode="inline"
                    theme="dark"
                    inlineCollapsed={state}
                >
                    <Menu.Item key="88" icon={<ContainerOutlined />}>
                        <NavLink to="/">工作台</NavLink>
                    </Menu.Item>
                    <SubMenu key="sub1" icon={<MailOutlined />} title="文章管理">
                        <Menu.Item key="101"><Link to='/Article_Manager/All_articles'>所有文章</Link></Menu.Item>
                        <Menu.Item key="102"><Link to='/Article_Manager/Label_Management'>标签管理</Link></Menu.Item>
                        <Menu.Item key="103"><Link to='/Article_Manager/Sort_Management'>分类管理</Link></Menu.Item>
                    </SubMenu>
                    <Menu.Item key="16" icon={<DesktopOutlined />}>
                    <NavLink to='/mypages/Mypages'>  页面管理</NavLink>
                    </Menu.Item>
                    <Menu.Item key="3" icon={<ContainerOutlined />}>
                        <NavLink to='/Knowledge/Knowledge'>知识小册</NavLink>
                    </Menu.Item>
                    <Menu.Item key="4" icon={<ContainerOutlined />}>
                        <NavLink to='/Posters/Posters'>海报管理</NavLink>
                    </Menu.Item>
                    <Menu.Item key="5" icon={<ContainerOutlined />}>
                        <NavLink to='/Comments/Comments'>评论管理</NavLink>
                    </Menu.Item>
                    <Menu.Item key="6" icon={<ContainerOutlined />}>
                        <NavLink to="/mailManagement/mail">邮件管理</NavLink>
                    </Menu.Item>
                    <Menu.Item key="7" icon={<ContainerOutlined />}>
                        <NavLink to="/fileManagement/file">文件管理</NavLink>
                    </Menu.Item>
                    <Menu.Item key="8" icon={<ContainerOutlined />}>
                        <NavLink to="/searchRecords/search">搜索记录</NavLink>
                    </Menu.Item>
                    <Menu.Item key="9" icon={<ContainerOutlined />}>
                        <Link to="/view/view"> 访问统计</Link>
                    </Menu.Item>
                    <Menu.Item key="10" icon={<ContainerOutlined />}>
                        <Link to="/user/user"> 用户管理</Link>
                    </Menu.Item>
                    <Menu.Item key="11" icon={<ContainerOutlined />}>
                        <Link to="/setting/setting"> 系统设置</Link>
                    </Menu.Item>
                </Menu>
            </div>
        </Sider>
        <Layout className={styles.right}>
            <Header className={styles.top}>
                <Button type="primary" onClick={toggleCollapsed} style={{ marginBottom: 16 }}>
                    {React.createElement(state ? MenuUnfoldOutlined : MenuFoldOutlined)}
                </Button>
                <div className={styles.Koyo}>
                    <GithubOutlined style={{ fontSize: "24px" }} />
                    <div className={styles.box2}>
                        <Dropdown overlay={menu} placement="bottomLeft" arrow>
                            <UserOutlined style={{ fontSize: "20px" }} />
                        </Dropdown>
                    </div>
                    <div className={styles.HI}>
                        HI,<span>{andio.name}</span>
                    </div>
                </div>
            </Header>
            <Content className={styles.bottom}>
                <div className="contentScroll">{props.children}
                    <div className={styles.footer}>
                        <GithubOutlined style={{ fontSize: "30px", color: "#" }} />
                        <p>
                            Copyright <CopyrightOutlined /> 2021 Designed by Fantasticit.
                        </p>
                    </div>
                </div>
            </Content>
        </Layout>
    </Layout>

}

export default management